import React from 'react';
import Icon from './Icon';
import MobileTopOffset from './MobileTopOffset';
import Affix from './Affix';
import {NavBar as AntdNavBar} from 'antd-mobile';
import style from './css/NavBar.css';

class NavBar extends React.Component {
	
	constructor(...args) {
		super(...args);
	}
	
	render() {
		let icon = this.props.icon;
		let defaultIcon = this.props.defaultIcon;
		if(defaultIcon) {
			icon = (
				<Icon 
				className={style.backIcon} 
				type={require('../assets/svg/back.svg')} 
				onClick={this.props.onBack} />
			);
		}
		return (
			<div className='navBarContainer'>
				<Affix offsetTop={-1}>
					<MobileTopOffset className={style.navTopOffset} updateCallBack={this.props.topOffsetUpdateCallBack} />
					<AntdNavBar 
					mode={this.props.mode || 'dark'} 
					icon={icon} 
					leftContent={this.props.leftContent} 
					rightContent={this.props.rightContent} 
					onLeftClick={this.props.onLeftClick}>
						{this.props.children}
					</AntdNavBar>
					<div>
						{this.props.bottomContent}
					</div>
				</Affix>
			</div>
		);
	}
	
}

export default NavBar;